Создание красивой RSS иконки для блога
Для тех, кто еще не знает RSS — специальный формат сообщений в блоге, который позволяет получать обновления с сайта без необходимости его посещения. Для чтения используются специальный программы — RSS ридеры (например, Google Reader).
Как правило, в каждом блоге есть кнопка, которая позволяет подписаться на статьи вашего блога по RSS. Располагаться она может где угодно, но должна быть заметной, часто ее помещают в сайдбар поближе к шапке сайта, иногда придают ей внушительный размер, чтобы посетители заметили. В любом случае пользователь не должен ее специально искать.
В принципе, иконка RSS имеет некий стандарт, если можно так выразиться — оранжевого цвета с белым изображением внутри. Тем не менее, в последнее время дизайнеры начали экспериментировать в этом направлении, создавая оригинальные и непохожие друг на друга иконки. Так почему бы нам тоже не нарисовать что-то свое!
Приступим к созданию собственной RSS иконки для вашего блога — для этого понадобиться выполнить 3 простых шага.
Шаг 1. Создание формы
Скачиваем набор форм для RSS иконок. Чтобы подключить их в фотошоп, находим директорию, где он установлен и копируем *.csh файл в папку Presets\Custom Shapes. Далее в графическом редакторе photoshop в боковой панели инструментов выбираем элемент с формами (пункт 1 на рисунке ниже):
В верхней панели управления появится блок с элементами разных форм. При клике на нем появится окно с доступным набором, справа от которого будет небольшая стрелочка. Нажимаем на нее и в выпадающем меню выбираем пункт Load Shapes дабы загрузить новые формы. После этого количество доступных элементов увеличится.
Выбираем нужную нам форму и начинаем рисовать. Удерживая кнопку Shift, мы получим «правильную фигуру» без растяжек в ширину или высоту. Форма готова, соответствующий слой создан.
Шаг 2. Задание стиля для иконки
Стиль — это набор свойств для объекта (тень, свечение, контур), которые группируются в одно целое и применяются к тому или иному элементу одним кликом мышки. В прошлом посте я писал о красивых стилях для фотошопа, где указал ссылки на 2 архива со стилям (там сможете их скачать).
Перед тем как использовать стили их также нужно установить. Для этого в разделе Edit главного меню находим пункт Preset Manager.
В выпадающем списке выбмраем пункт стили (styles). После выбора появится перечень уже существующих элементов. Чтобы загрузить новые нужно нажать кнопочку Load. После завершения жмем Done.
Теперь собственно применяем эти самые стили. Для этого, во-первых удостоверимся, что в слоях выбран нужный нам элемент с формой, после чего кликаем по любому понравившемуся там стилю. Результат будет тут же применен.
Шаг 3. Косметические правки
Теперь на основании полученных знаний, можем слегка улучшить нашу иконку. Для этого добавим еще один слой (пункт 1 на рисунке ниже), причем он должен располагаться под слоем с формой:
Выделяем прямоугольную область, которая полностью покрывает рисунок внутри иконки (пункт 2). После этого выбираем инструмент заливки (пункт 3) и заливаем выделенную область цветом по умолчанию. Дальше опять просто кликаем на понравившийся вам стиль и он будет применен к этой прямоугольной области.
Как я уже говорил, стиль — это совокупность разных свойств объекта. Если вы посмотрите на слой, то заметите перечень этих самых свойств (пункт 1 на рисунке ниже):
Поэтому можно вносить свои изменения в каждый стиль. Для этого кликаете дважды по иконке (пункт 2) и во всплывающем окне формируете уже новые настройки стиля. Можно, например, добавить в форме тень (пункт 3). Чтобы сохранить изменения, нажимаете «Ок».
После всех настроек соединяете видимые слои изображения — раздел Layer в главном меню, пункт MergeVisible (или Ctrl + Shift + E).
RSS иконка готова!
Имея в наличии много разных форм и стилей, можно легко и быстро создать оригинальную RSS иконку для своего блога.
Если урок понравился — подписываемся на RSS или кликните на соответствующую иконку в блоге:)
Классно поработал.. Но вот я не пойму, а что можно еще создавать для вордпреса, кроме иконок.
Урок понятен, но вот если бы ты смог пояснить подробнее, как сделал те четверти радиусов? Теоретически я понимаю, как это делается, а на практике, просто гемор какой-то..
Будет желание, можешь разместить свой материал у меня…
Не совсем понял, что подразумевается под «четверти радиусов»?
Ну что непонятного? Та фигура белого цвета, которая внутри всех значков, ну как бы две полусферы…
Я их не делал вообще, использовал готовые формы — см. шаг 1
Спасибо, теперь понятно. Надо посмотреть, есть ли у меня такие значки в фотошопе. Но ни разу не обращал на них внимания.
Народ а можно на нормальный файл-сервер залить формы, ну рапиду или депозит в конце концов, единственное зеркало на летитбите — не вариант =(
Stas, в ближайшие выходные я постараюсь сделать зеркала для файлов.
Зеркало — http://www.mediafire.com/
Удобный файлообменник, правда нет бонусов для хозяина файла.
Это главная файлообменника. Можно поправить ссылку на зеркало? А то летитбит на файрволле закрыт. :(
Залил на хостинг — формы, стили1, стили2.
Урок очень полезный, спасибо. Сделал себе новую RSS иконку — можно наблюдать ее в моем блоге. Жаль форм маловато :)
Замечательные иконки вышли.. Спасибо пост.
VaNToS, если найду, обязательно об этом напишу.
Очень нужные сэмплы, спасибо. Сделал себе иконку.
Ты случайно не знаеш, как самому сделать такие формы для фотошопа, в кореле там или ещё где?
Мне очень интересно. Буду благодарен если найдёш.
Спасибо за такое детальное руководство. Очень полезно для всех, кто хочет сделать иконку для RSS своими руками.
Lady Maksima, спасибо за распространение моего руководства в массы:)
Сорри за глупый вопрос (мало общаюсь с фотошопом)
У меня стоит CS3 Русский (лучше бы англ был нифига по русски не понять)
У меня нету директорий Custom/Presets
Создавал сам закидывал файлик запускаю
но ничего не появилось на сайдбаре (как на скриншоте)
закинул так C:Program FilesAdobeAdobe Photoshop CS3НаборыCustom
но тоже без вариантов =(
и вовще что за бред =) я понимаю фотошоп русский =) но что-бы директории это какойто фотожоп прям получается=)
Помогите плийз :oops:
В принципе, закидывать файл в нужную папку не обязательно, как я потом понял.
В сайдбаре нужно выбрать инструмент форм. Вообще можешь еще заглянуть в меню Edit — Preset Manager (хз как по русски) и в открывшемся окне найти Custom Shapes. После чего загрузить формы из файла.
2 Tod Нашел !
все получилось !
просто все этот корявый русский фотошоп =(
надо нафиг сносить и ставить ENG
Спасибо за помощь ;-)
Да винда слава богу тоже англ =)
вот чет решил русс фотошоп посмотреть xD ну я не фанат конечно PS =)
Но в англ я хоть понимал что делаю =) а русс это просто конец =) как первый раз=)
P.s забыл сказать даже =) Спасибо за качественный урок ;-)
Zer0CooL, не люблю русский фотошоп:) и винду. С юных лет ставлю только английские версии.
Прикольно… Спасибо большое! Запарился чужими иконками пользоваться!
Советую в качестве зеркала.
filekeeper.org/ru/ Загрузить файлы 10 Gb
позволяет хранить 10 ГБ файлов. Трафик не ограничен независимо от направления.
seoBB.log, выглядит немного стремно:) Вызывает страх насчет сохранности и доступности файлов, если честно. Привык доверять более-менее продвинутым конторам, кто уже не первый год на рынке.
Спасибо! Статья очень полезная и как раз то, что я искала :)Уже почти разобралась, что это вообще такое RSS и подумывала свою какую-то иконку нарисовать, а тут такое руководство. Супер!
А у самого почему иконка не уникальная?
Valentin, мне текущая приглянулась очень:)
Можешь залить формы для иконок куда-нибудь еще? У меня не скачивается…
Денис, только что попробовал скачать, все работает.
спасибо огромное, очень хорошая статья. раньше не знал об этом блоге, теперь сижу читаю всё подряд)
Тод, а можно несколько уроков из серии тех дизайна, если не своих, то переведенных, ну очень интересно…
Сергей Мишалов, сейчас, увы не хватает времени на переводы каких-то больших и серьезных статей. Кстати, если есть желание мог бы разместить твой гостевой пост с одной из таких публикаций в данном блоге. Была бы неплохая реклама твоему персональном проекту.
Там кто-то спрашивал как самому замутить форму (shape). Так вот:
1) Нарисовать её с помощью инструмента «pen tool» (не знаю как по-русски) сразу над инструментом «Текст» в CS4
2) Когда нарисовали тыкнуть правой кнопкой мыши и выбрать пункт «Define custom shape» и в появившемся окне дать ей имя.
3) После этого форма добавится к уже существующим стандартным, как до них добраться описано в 1-м этапе урока.
Отличная статья, буду теперь делать сам для своих сайтов иконки!